<template>
	<view class="btn-wrapper" :style="{width, height}">
		<button class="action" :class="type" :style="baseStyle" @click="onClick">
			<slot></slot>
		</button>
	</view>
</template>

<script setup>
import { computed } from 'vue'
import { navigateBack, redirectTo, switchTab, navigateTo } from '@/utils/navigator'

const props = defineProps({
	type: {
		type: String,
    	default: 'primary'
	},
	width: {
		type: String,
		default: '100%'
	},
	height: {
		type: String,
		default: '88rpx'
	},
	round: {
		type: [String, Array],
		default: '44rpx'
	},
	url: {
		type: String,
		default: ''
	},
	openType: {
		type: String,
		default: 'navigate'
	},
	color: {
		type: String,
		default: ''
	},
	fontSize: {
		type: String,
		default: ''
	}
})

const emits = defineEmits(['click'])

const baseStyle = computed(() => {
	const { height: lineHeight, round, fontSize, color } = props
	if (round) {
		let borderRadius
		if (Array.isArray(round) && round.length) {
			borderRadius = round.join(' ')
		} else {
			borderRadius = round
		}
		return { borderRadius, lineHeight, fontSize, color }
	} else {
		return { lineHeight, fontSize, color }
	}
})

const onClick = () => {
	const { url, openType: type } = props
	if(type === 'navigateBack') {
		navigateBack()
		return
	}
	if(url) {
		if(type === 'redirect') {
			redirectTo(url)
		} else if(type === 'switchTab') {
			switchTab(url)
		} else {
			navigateTo(url)
		}
	} else {
		emits('click')
	}
}
</script>

<style lang="scss">
.btn-wrapper {
	.action {
		width: 100%;
		height: 100%;
		font-size: 32rpx;
		text-align: center;
		transition: transform .1s ease;
		white-space: nowrap;
		&:active {
			transform: scale(0.9);
		}
		&::after {
			border: none;
		}
		&.primary {
			color: #fff;
			background-image: linear-gradient( 124deg, #00CBFF 0%, #0080FF 100%);
		}
		&.plain {
			color: #000;
			border: 1rpx solid #999;
			background-color: #fff;
		}
		&.normal {
			color: #000;
			background-color: #fff;
		}
		&.general {
			background-color: #0080FF;
			color: #FFF;
		}
		&.rarely {
			background-color: #999;
			color: #FFF;
		}
	}
}
</style>